<template>
  <div class="page-mobile-index">
    <!-- <img class="bg-img" src="/img/index-bgi.png" /> -->
    <div class="new-index-bg-gray" v-if="web_info.THEME_TYPE == 2 && kl_md.KLZTQH == 1">
      <div class="head-new-b">
        {{title}}
      </div>
      <div class="fixed-new-b"></div>
      <!-- <div class="swiper-nav-new-b">
        <van-swipe @change="onChange" :autoplay="3000" :stop-propagation="false" :show-indicators="false">
          <van-swipe-item
            v-for="(item, index) in banner_list.filter(i => i.type == 2)"
            :key="index"
          >
            <img
              class="swiper-banner"
              v-lazy="item.bannerUrl"
              :key="item.bannerUrl"
              @click.stop="toPath(item)"
            />
          </van-swipe-item>
        </van-swipe> -->
        <!-- <div class="tips">点击右上角关注公众号获取课程最新信息哟</div> -->
      <!-- </div> -->
      <div class="menu-new-b">
        <div class="menu-item" v-for="(item, index) in nav_list" :key="index">
          <div class="menu-box" @click="toPath(item, 'nav')">
            <img v-lazy="item.icon" :key="item.icon" />
            <div class="menu-name">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <!-- <div class="advert-new-b">
        <div class="advert-left-box">
          <div class="advert-name">{{themeSettingObj.a_name}}</div>
          <div class="advert-left-img" @click="toPageByPath(themeSettingObj.b_path)">
            <img class="bg-img" :src="themeSettingObj.b_image || '/img/mobile/home_image_discount_01.png'" alt="">
            <div class="bg-title">
              <p>{{themeSettingObj.b_name}}</p>
              <img class="tobuy" src="/img/mobile/home_btn_promptly_01.png" alt="">
            </div>
          </div>
        </div>
        <div class="advert-line"></div>
        <div class="advert-right-box">
          <div class="count-down">
            <span style="margin-right:.2rem">限时优惠</span>
            <span class="box">{{timeObj.hours}}</span>
            <span style="margin:0 .1rem">:</span>
            <span class="box">{{timeObj.minutes}}</span>
            <span style="margin:0 .1rem">:</span>
            <span class="box">{{timeObj.seconds}}</span>
          </div>
          <div class="middle-advert-img" @click="toPageByPath(themeSettingObj.c_path)">
            <img :src="themeSettingObj.c_image || '/img/mobile/home_image_discount_02.png'" alt="">
            <div class="title">{{themeSettingObj.c_name}}</div>
          </div>
          <div class="bottom-advert-img" @click="toPageByPath(themeSettingObj.d_path)">
            <img :src="themeSettingObj.d_image || '/img/mobile/home_image_discount_03.png'" alt="">
            <div class="title">
              <p>{{themeSettingObj.d_name && themeSettingObj.d_name.substring(0,4)}}</p>
              <p>{{themeSettingObj.d_name && themeSettingObj.d_name.substring(4)}}</p>
              <img class="tobuy" src="/img/mobile/home_btn_promptly_02.png" alt="">
            </div>
          </div>
        </div>
      </div> -->
     <!-- <div class="team-building-new-b">
        <img src="/img/mobile/home_image_group.png" alt="" @click="toPageByPath('/m/group-tuan')">
      </div> -->
      <div class="live-module-new-b" v-if="!is_hidden_content && chapter_live_course_list.length > 0">
        <div class="head-box">
          <div class="head-left">直播课程</div>
          <div class="head-right" @click="$router.push('/m/course?action=live')">更多<img src="/img/mobile/right-icon.png" alt="" srcset=""></div>
        </div>
        <div class="live-wrapper-list">
          <div class="live-content-list">
            <div class="live-item" v-for="(item, index) in chapter_live_course_list" :key="index">
              <live-card-new :detail="item" :isClearTimes="isClearTimes"></live-card-new>
            </div>
            <div class="live-item"></div>
          </div>
        </div>
      </div>
      <div class="rec-course-module-new-b">
        <div class="head-box">
          <div class="head-left">精选课程</div>
          <div class="head-right" @click="$router.push('/m/course?action=rec')">更多<img src="/img/mobile/right-icon.png" alt="" srcset=""></div>
        </div>
        <course-card-new
            v-for="(item, index) in hot_course_list"
            :detail="item"
            :is_member="is_member"
            :user_member="user_member"
            :memberDiscount="memberDiscount"
            :key="index"
          ></course-card-new>
      </div>
      <div class="rec-course-module-new-b" v-for="(item, index) in hot_major_course_list" :key="index">
        <div class="head-box">
          <div class="head-left">{{ item.name }}</div>
          <div class="head-right" @click="$router.push('/m/course?major_id='+item.id)">更多<img src="/img/mobile/right-icon.png" alt="" srcset=""></div>
        </div>
        <course-card-new
            v-for="(item, index) in item.courseList"
            :detail="item"
            :is_member="is_member"
            :user_member="user_member"
            :memberDiscount="memberDiscount"
            :key="index"
          ></course-card-new>
          <van-empty
            :description="$t('locale.mobile.index.t4')"
            v-if="item.courseList.length == 0"
          />
      </div>
      <!-- <div class="combo-module-new-b" v-if="!is_show_price && !is_hidden_content && kl_md.KLKCTC == 1 && combo_course_list.length > 0">
        <div class="head-box">
          <div class="head-left">精选套餐</div>
          <div class="head-right" @click="$router.push('/m/course-combo')">更多<img src="/img/mobile/right-icon.png" alt="" srcset=""></div>
        </div>
        <div :class="['combo-wrapper-list', kl_md.KLGL == 1 ? 'gelin-card' : '']" v-if="combo_course_list.length > 0">
          <div class="combo-content-list">
            <div class="combo-item" v-for="(item, index) in combo_course_list" :key="index" @click="$router.push('/m/combo-detail?id='+item.id)">
              <div class="course-combo-content" v-if="item.courseList && item.courseList.length > 0">
                <div class="course-box" v-if="item.courseList[0]">
                  <combo-card-new :detail="item.courseList[0]"></combo-card-new>
                </div>
                <div class="course-add-btn">+</div>
                <div class="course-box" v-if="item.courseList[1]">
                  <combo-card-new :detail="item.courseList[1]"></combo-card-new>
                </div>
              </div>
              <div class="combo-info-text">内含{{ item.courseList.length }}门课程</div>
              <div class="combo-price-box">
                <span class="new-price-combo"><span>￥</span><span style="font-size:.384rem;">{{ item.currentPrice }}</span></span>
                <span class="old-price-combo">共省{{ Number(item.price) - Number(item.currentPrice) }}块</span>
              </div>
            </div>
          </div>
        </div>
        <van-empty
            description="暂无新闻资讯"
            v-if="combo_course_list.length == 0"
          />
      </div> -->
<!--      <div class="information-new-b">
        <div class="head-box">
          <div class="head-left">新闻资讯</div>
          <div class="head-right" @click="$router.push('/m/information')">更多<img src="/img/mobile/right-icon.png" alt="" srcset=""></div>
        </div>
        <div class="information-wrapper-list" v-if="news_info_list.length > 0">
          <div class="information-content-list">
            <div class="information-item" v-for="(item, index) in news_info_list" :key="index">
              <information-card :detail="item"></information-card>
            </div>
          </div>
        </div>
        <van-empty
            description="暂无新闻资讯"
            v-if="news_info_list.length == 0"
          />
      </div> -->
    </div>
    <!-- <div class="old-index-bg-white" v-else>
    
    <div class="header">
      <div class="header_left">
        
      </div>
      <div class="center_title">{{title}}</div>
      <div class="header_right">
        <img src="/img/mobile/index_nav_search.png" alt="" @click="onClickRight">
      </div>
    </div>
    <div class="fixed-box"></div>
    <div class="bg-banner"></div>
    <div class="swiper-nav">
      <van-swipe @change="onChange" :autoplay="3000" :stop-propagation="false">
        <van-swipe-item
          v-for="(item, index) in banner_list.filter(i => i.type == 2)"
          :key="index"
        >
          <img
            class="swiper-banner"
            v-lazy="item.bannerUrl"
            :key="item.bannerUrl"
            @click.stop="toPath(item)"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="tap-nav">
      <div
        class="nav-item"
        v-for="(item, index) in nav_list"
        :key="index"
        @click="toPath(item, 'nav')"
      >
        <div class="item-icon">
          <img v-lazy="item.icon" :key="item.icon" />
        </div>
        <div class="item-name">{{ item.name }}</div>
      </div>
      <div
        class="nav-item"
        @click="$router.push('/m/course?action=live')"
      >
        <div class="item-icon">
          <img src="/img/mobile/menu_live.png" />
        </div>
        <div class="item-name">直播</div>
      </div>
      <div
        class="nav-item"
        @click="$router.push('/m/discount')"
      >
        <div class="item-icon">
          <img src="/img/mobile/menu_discount.png" />
        </div>
        <div class="item-name">折扣</div>
      </div>
      <div
        class="nav-item"
        @click="$router.push('/m/teacher-zone')"
      >
        <div class="item-icon">
          <img src="/img/mobile/menu_teacher.png" />
        </div>
        <div class="item-name">名师专区</div>
      </div>
      <div
        class="nav-item"
        @click="$router.push('/m/course?action=free')"
      >
        <div class="item-icon">
          <img src="/img/mobile/menu_free.png" />
        </div>
        <div class="item-name">免费课</div>
      </div>
    </div>
    <div class="notice-module" v-show="false">
      <div class="notice-container">
        <div class="notice-left">
          <img
            src="/img/mobile/index_nev_notice.png"
            alt=""
            @click="toNotice"
          />
        </div>
        <ul ref="notice" class="notice-right">
          <li
            v-for="(item, index) in notice_info_list"
            :key="index"
            @click="$router.push('/m/notice-detail?id=' + item.id)"
          >
            <div class="title">{{ item.name }}</div>
            <div class="time">{{ formatNoticeDate(item.startTime) }}</div>
          </li>
          <li
            v-if="notice_info_list.length > 2"
            @click="
              $router.push('/m/notice-detail?id=' + notice_info_list[0].id)
            "
          >
            <div class="title">{{ notice_info_list[0].name }}</div>
            <div class="time">
              {{ formatNoticeDate(notice_info_list[0].startTime) }}
            </div>
          </li>
          <li
            v-if="notice_info_list.length > 2"
            @click="
              $router.push('/m/notice-detail?id=' + notice_info_list[1].id)
            "
          >
            <div class="title">{{ notice_info_list[1].name }}</div>
            <div class="time">
              {{ formatNoticeDate(notice_info_list[1].startTime) }}
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="notice-box">
      <van-notice-bar left-icon="/img/mobile/new_notice.png" :scrollable="false">
        <van-swipe
          vertical
          class="notice-swipe"
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item v-for="(item, index) in notice_info_list" :key="index" @click="$router.push('/m/notice-detail?id=' + item.id)"><div class="title">{{ item.name }}</div><div class="time">{{formatNoticeDate(item.startTime)}}</div></van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </div>
    
    <div class="interval-line"></div>
    <div class="recommend-module">
      <div class="header-recommend">
        <div class="left">
          <img src="/img/mobile/hot_course_icon.png" alt="">
          <img src="/img/mobile/index_menu_recommend.png" alt="" />
          <span>推荐课程</span>
        </div>
        <div class="right" @click="$router.push('/m/course?action=rec')">
          查看全部<van-icon name="arrow" style="margin-left:2px;" />
        </div>
      </div>
      <div class="recommend-container">
        <div class="tap-content">
          <div
            :class="['tap', item.is_actived ? 'active' : null]"
            v-for="(item, index) in major_rec_list"
            :key="index"
            @click="handleClickTap(item)"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="module-recommend">
          <course-card
            v-for="(item, index) in hot_course_list"
            :detail="item"
            :is_member="is_member"
            :user_member="user_member"
            :memberDiscount="memberDiscount"
            :key="index"
            :bottomInline="index != hot_course_list.length - 1"
          ></course-card>
          <van-empty
            :description="$t('locale.mobile.index.t4')"
            v-if="hot_course_list.length == 0"
          />
        </div>
      </div>
    </div>
    <div class="interval-line" v-if="!is_hidden_content && chapter_live_course_list.length > 0"></div>
    <div class="live-module" v-if="!is_hidden_content && chapter_live_course_list.length > 0">
      <div class="header-live">
        <div class="left">
          <img src="/img/mobile/index_menu_live.png" alt="" />
          <span>直播课程</span>
        </div>
        <div class="right" @click="$router.push('/m/course?action=live')">
          查看全部<van-icon name="arrow" style="margin-left:2px;" />
        </div>
      </div>
      <div class="live-container" v-if="chapter_live_course_list.length > 0">
        <live-card
          v-for="(item, index) in chapter_live_course_list"
          :key="index"
          :detail="item"
          :isClearTimes="isClearTimes"
          :style="{ marginLeft: index === 0 ? '.2rem' : '0rem' }"
        ></live-card>
      </div>
    </div>
    <div
      class="interval-line"
      v-if="
        !is_show_price &&
          !is_hidden_content &&
          combo_course_list.length > 0 &&
          kl_md.KLKCTC == 1
      "
    ></div>
    <div
      class="recommend-module"
      v-if="
        !is_show_price && !is_hidden_content && kl_md.KLKCTC == 1 && combo_course_list.length > 0
      "
    >
      <div class="header-recommend">
        <div class="left">
          <img src="/img/mobile/index_menu_recommend.png" alt="" />
          <span>课程套餐</span>
        </div>
        <div class="right" @click="$router.push('/m/course-combo')">
          查看全部<van-icon name="arrow" style="margin-left:2px;" />
        </div>
      </div>
      <div class="recommend-container">
        <div class="module-recommend" style="padding:0;">
          <combo-card
            v-for="(item, index) in combo_course_list"
            :key="index"
            :detail="item"
            :bottomInline="index != combo_course_list.length - 1"
          ></combo-card>
          <van-empty
            description="暂无套餐"
            v-if="combo_course_list.length == 0"
          />
        </div>
      </div>
    </div>
   <div class="interval-line"></div>
    <div class="information-module">
      <div class="header-information">
        <div class="left">
          <img src="/img/mobile/index_menu_new.png" alt="" />
          <span>新闻资讯</span>
        </div>
        <div class="right" @click="$router.push('/m/information')">
          查看全部<van-icon name="arrow" style="margin-left:2px;" />
        </div>
      </div>
      <div class="recommend-container">
        <news-card
          v-for="(item, index) in news_info_list"
          :key="index"
          :detail="item"
          :isShowBottomLine="index + 1 < news_info_list.length"
        ></news-card>
      </div>
    </div>
    </div> -->
    
    <!-- <div class="bottom-area" v-show="web_info.ADVERTISEMENT_SWITCH == 1">
      <em
        ><img src="/img/dark-logo.png" />{{ $t("locale.mobile.index.t6") }}</em
      >
      <p>www.keelea.com</p>
    </div> -->
    <!-- 登录提示弹窗 -->
    <van-overlay :show="isShowLogin && showLoginBox" @click="isShowLogin = false">
      <div class="login-tips-box">
        <van-icon class="close-btn" name="clear" @click="isShowLogin = false"/>
        <p class="tips-text">亲，您还没有登录哟～</p>
        <div class="wx-btn" @click="toLogin('wx')">微信登录</div>
        <div class="account-btn" @click="toLogin('account')">账号登录</div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { getCourse, getCourseByMajor, getLiveChapter } from "~/api/course";
import { getMajorList,getMajorCourse } from "~/api/major";
import CourseCard from "~/components/mobile/CourseCard.vue";
import CourseCardNew from "~/components/mobile/CourseCardNew.vue";
import LiveCard from "~/components/mobile/LiveCard.vue";
import LiveCardNew from "~/components/mobile/LiveCardNew.vue";
import ComboCard from "~/components/mobile/ComboCard.vue";
import ComboCardNew from "~/components/mobile/ComboCardNew.vue";
import InformationCard from "~/components/mobile/InformationCard.vue";
import { getMemberInfo, getMember } from "~/api/member";
import { getCourseComboList } from "~/api/course-combo";
import { getNewsList } from "~/api/news";
import { mapState, mapActions, mapMutations } from "vuex";
import { scroll } from "~/utils/commonfun";
import { draggable } from "~/utils/commonfun";
import NewsCard from "~/components/mobile/NewsCard.vue";
export default {
  components: {
    CourseCard,
    LiveCard,
    NewsCard,
    ComboCard,
    LiveCardNew,
    CourseCardNew,
    ComboCardNew,
    InformationCard,
  },
  scrollToTop: true,
  props: ["setDisabled", "refreshFun", "setLoading"],
  data() {
    return {
      isClearTimes: false, //直播组件定时器是否清楚
      course_list: [],
      major_rec_list: [], //推荐专业
      page: 1,
      pageSize: 4,
      scroll_heigth: 0, //缓存当前页面位置
      left: 0,
      hot_course_list: [], //推荐课程
      live_course_list: [], //直播课程
      combo_course_list: [], //套餐课程
      memberDiscount: {}, //会员折扣
      chapter_live_course_list: [],
      news_list: [], //新闻资讯
      noticeTimer: null, //公告定时器
      isShowLogin:true,
      timeObj:{
        hours:"00",
        minutes:"00",
        seconds:"00"
      },//优惠倒计时对象
      timeTimer:null,//优惠倒计时定时器
      hot_major_course_list:[],
    };
  },
  computed: {
    ...mapState({
      major_list(state) {
        return [
          {
            text: this.$t("locale.mobile.index.t7"),
            value: ""
          },
          ...state.major_list
            .filter(i => i.level === 0)
            .map(i => {
              return {
                ...i,
                value: i.id,
                text: i.name
              };
            })
        ];
      },
      web_info(state) {
        return state.web_info;
      },
      nav_list(state) {
        return state.nav_list;
      },
      notice_list(state) {
        return state.notice_list;
      },
      class_list(state) {
        return state.class_list;
      },
      banner_list(state) {
        return state.banner_list;
      },
      is_member(state) {
        return JSON.stringify(state.member_info) != "{}";
      },
      user_member(state) {
        return state.member_info;
      },
      // memberDiscount(state) {
      //   return state.member_discount;
      // },
      kl_md(state) {
        return state.kl_md;
      },
      user_info(state) {
        return state.user_info;
      },
      is_wechat() {
        if (process.client) {
          var ua = navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == "micromessenger") {
            return true;
          } else {
            return false;
          }
        } else {
          return false;
        }
      },
      third_part_login(state) {
        return state.third_part_login;
      },
      is_in_minigram(state) {
        return state.is_in_minigram;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      }
    }),
    title() {
      if (this.$route.name == "Mindex") {
        if (process.client) {
          return this.$store.state.web_info.SYSTEM_NAME || "";
        } else {
          return "";
        }
      } else {
        return this.$route.meta.title;
      }
    },
    themeSettingObj(){
      return (this.web_info.THEME_SETTING_OBJ && JSON.parse(this.web_info.THEME_SETTING_OBJ)) || {};
    },
    showLoginBox(){
      return this.kl_md.KLYJDL == 1 && !(this.user_info && Object.keys(this.user_info).length > 0) && this.is_in_minigram && this.is_wechat && this.third_part_login.mp
    },
    news_info_list() {
      if (this.news_list && this.news_list.length > 0) {
        return this.news_list
          .reverse()
          .filter((i, x) => i.isOpen === 1)
          .filter((i, x) => x < 4);
      } else {
        return [];
      }
    },
    notice_info_list() {
      if (this.notice_list && this.notice_list.length > 0) {
        return this.notice_list
          .filter((i, x) => i.isOpen == 1)
          .filter((i, x) => x < 5);
      } else {
        return [];
      }
    },
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    }
    // hot_course_list() {
    //   return this.course_list.filter((i, x) => x < 6);
    // },
    // free_course_list() {
    //   return this.course_list
    //     .filter(i => i.isFree == 1)
    //     .filter((i, x) => x < 8);
    // },
    // live_course_list() {
    //   return this.course_list
    //     .filter(i => i.isLive == 1)
    //     .filter((i, x) => x < 4);
    // }
  },
  watch: {},
  methods: {
    ...mapActions([
      "initMajorList",
      "initClassList",
      "initNoticeList",
      "initBannerList",
      "initNavList",
      "initMember"
    ]),
    ...mapMutations(["SET_IS_LOADING"]),
    countDown(){
      this.timeTimer = setInterval(() => {
        this.timeObj = {
          hours : (24 - new Date().getHours() - 1) < 10 ? '0' + (24 - new Date().getHours() - 1) : (24 - new Date().getHours() - 1),
          minutes : (60 - new Date().getMinutes() - 1) < 10 ? '0' + (60 - new Date().getMinutes() - 1) : (60 - new Date().getMinutes() - 1),
          seconds : (60 - new Date().getSeconds()) < 10 ? '0' + (60 - new Date().getSeconds()) : (60 - new Date().getSeconds()),
        }
      }, 1000);
    },
    //格式化通知发布时间
    formatNoticeDate(timestamp) {
      // console.log(timestamp)
      if (new Date().getTime() - timestamp < 3600000) {
        return "刚刚";
      } else if (
        new Date(timestamp).toDateString() === new Date().toDateString()
      ) {
        let HoursTime = new Date().getTime() - timestamp;
        let hour = parseInt(HoursTime / (1000 * 60 * 60));
        return hour + "小时前";
      } else {
        let time = new Date().getTime() - timestamp;
        let day = parseInt(time / (1000 * 60 * 60 * 24));
        return day + "天前";
      }
    },
    async getRecCourseToMajor(){
      let params = {
        isRec : 1,
        sort:"videoSort desc"
      }
      let result = await getMajorCourse(params);
      if (result && result.data && result.data.code == 200) {
        // 加一层折扣时间的判断,不在折扣时间内判定为不是折扣课程
        this.hot_major_course_list = result.data.data.rows.filter(item=>item.courseList.length > 0).map(item=>{
          let courseList = item.courseList.map(course=>{
            let currentTime = new Date().getTime();
            if(!(course.isDiscount == 1 && currentTime >= course.discountStartTime && course.discountEndTime >= currentTime)){
              return {
                ...course,
                isDiscount:0
              };
            }else{
              return course;
            }
          })
          return {
            ...item,
            courseList
          }
        });
        // this.hot_major_course_list = result.data.data.rows.filter(item=>item.courseList.length > 0);
        // console.log("hot_major_course_list",this.hot_major_course_list);
      } else {
        
      }
    },
    toLogin(type){
      if(type == 'wx'){
        wx.miniProgram.navigateTo({
          url: `/pages/login/login?ip=${returnCitySN.cip}`,
          success: function() {
            console.log("成功跳转小程序");
          },
          fail: function() {
            console.log("跳转小程序失败");
          },
          complete: function() {
            console.log("完成");
          }
        });
      }else if(type == 'account'){
          this.$router.push('/m/login')
      }else{

      }
    },
    onClickRight() {
      if (this.$route.path == "/m/course") {
        return this.$router.push("/m/classify");
      }
      this.$router.push("/m/classify?action=search");
    },
    //公告通知定时器
    runNotice() {
      let i = 1;
      if(!this.$refs.notice){
        return false;
      }
      this.noticeTimer = setInterval(() => {
        // console.log("定时器工作中")
        if(!this.$refs.notice){
          clearInterval(this.noticeTimer);
          this.noticeTimer = null;
          return;
        }
        this.$refs.notice.style.transitionDuration = "500ms";
        this.$refs.notice.style.transform = "translateY(-" + 0.5 * i + "rem)";
        if (i == this.notice_info_list.length) {
          setTimeout(() => {
            this.$refs.notice.style.transitionDuration = "0ms";
            this.$refs.notice.style.transform = "translateY(-0rem)";
            i = 1;
          }, 600);
        }
        i++;
      }, 2000);
    },
    //获取新闻资讯
    async getNews() {
      this.SET_IS_LOADING(true);
      let result = await getNewsList();
      if (result && result.data && result.data.code == 200) {
        this.news_list = result.data.data.rows;
        console.log("news_list", result.data.data.rows);
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    //获取课程套餐
    async getCourseComboData() {
      // if (this.kl_md.KLKCTC != 1) {
      //   return;
      // }
      this.SET_IS_LOADING(true);
      let params = {
        sort: "id desc",
        offset: 0,
        limit: 3
      };
      let result = await getCourseComboList(params);
      if (result && result.data && result.data.code == 200) {
        this.combo_course_list = result.data.data.rows;
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    async getMemberInfo() {
      this.SET_IS_LOADING(true);
      console.log("=============执行1");
      if (this.user_info && Object.keys(this.user_info).length > 0) {
        console.log("=============执行2");
        let memberDiscount = await getMemberInfo(this.user_info.id);
        if (
          memberDiscount &&
          memberDiscount.data &&
          memberDiscount.data.code == 200
        ) {
          this.memberDiscount = memberDiscount.data.data;
        } else {
          
        }
      } else {
        this.memberDiscount = {};
      }

      this.SET_IS_LOADING(false);
    },
    async getLiveChapterCourse() {
      this.SET_IS_LOADING(true);
      let result = await getLiveChapter();
      if (result && result.data && result.data.code == 200) {
        this.chapter_live_course_list = result.data.data;
        console.log("chapter_live_course_list", result.data.data);
      } else {
        
      }
      this.SET_IS_LOADING(false);
    },
    handleDragMoving({ x, y, params }) {
      let left = x + params;
      let targetWidth = this.$refs.tap.offsetWidth;
      let tragWidth = this.$refs.target.offsetWidth;
      if (left < -(targetWidth - tragWidth)) {
        left = -(targetWidth - tragWidth);
      }
      if (left >= 0) {
        left = 0;
      }
      this.left = left;
    },
    onChange(index) {},
    async handleClickTap(item) {
      if (item.id == this.major_rec_list.filter(i => i.is_actived)[0]) {
        return false;
      }
      this.major_rec_list = this.major_rec_list.map(i => {
        if (i.id == item.id) {
          return {
            ...i,
            is_actived: true
          };
        } else {
          return {
            ...i,
            is_actived: false
          };
        }
      });
      this.page = 1;
      let hot_list = [];
      if (item.id == "all") {
        hot_list = (await this.getData()) || [];
      } else {
        hot_list = (await this.getData({ majorId: item.id})) || [];
      }
      this.hot_course_list = hot_list.map(item=>{
        let currentTime = new Date().getTime();
        if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
          return {
            ...item,
            isDiscount:0
          };
        }else{
          return item;
        }
      });
    },
    async getMajorData() {
      this.SET_IS_LOADING(true);
      let params = {
        offset: 0,
        limit: 10,
        sort: "videoSort desc",
        isRec: 1
      };
      let result = await getMajorList(params);
      if (result && result.data && result.data.code == 200) {
        this.SET_IS_LOADING(false);
        this.major_rec_list = [
          {
            name: this.$t("locale.mobile.index.t8"),
            id: "all",
            is_actived: true
          },
          ...result.data.data.rows
            .filter(i => i.isRec == 1)
            .map((i, x) => {
              return { ...i, is_actived: false };
            })
        ];
      } else {
        this.SET_IS_LOADING(false);
        this.$toast(
          this.$t("locale.mobile.index.t9") + result &&
            result.data &&
            result.data.msg
        );
      }
    },
    async getData(other_params) {
      return new Promise(async (resolve, reject) => {
        this.SET_IS_LOADING(true);
        let params = {
          offset: this.pageSize * (this.page - 1),
          limit: this.pageSize,
          sort: "sortIndex desc",
          // sort: 'sortIndex',
          // sortType: 'desc',
          isRec: 1,
          ...other_params
        };
        let result = await getCourseByMajor(params);
        if (result && result.data && result.data.code == 200) {
          this.SET_IS_LOADING(false);
          // this.course_list = result.data.data.rows;
          resolve(result.data.data.rows);
        } else {
          this.SET_IS_LOADING(false);
          this.$toast(
            this.$t("locale.mobile.index.t9"),
            result && result.data && result.data.msg
          );
        }
      })
        .then()
        .catch(e => {
          this.SET_IS_LOADING(false);
        });
    },
    toPath(path, type) {
      if (type == "nav") {
        const { url } = path;
        if (url) {
          if (/^http/.test(url)) {
            window.location.href = url;
          } else {
            this.$router.push({
              path: url
            });
          }
        }
      } else {
        const { redirectUrl } = path;
        if (redirectUrl) {
          if (/^http/.test(redirectUrl)) {
            window.location.href = redirectUrl;
          } else {
            this.$router.push({
              path: redirectUrl
            });
          }
        }
      }
    },
    toPageByPath(path){
      this.$router.push(path);
    },
    toNotice() {
      this.$router.push("/m/notice");
    },
    getMajorName(id) {
      let res = this.major_list.filter(i => i.id == id);
      if (res.length > 0) {
        return res[0].name;
      } else {
        return this.$t("locale.mobile.index.t10");
      }
    },
    initPage() {
      if (this.kl_md.KLDLTK == 1){
        this.$router.replace("/m/v2-question-bank");
        return;
      }
      return new Promise(async (res, rej) => {
        if (process.client) {
          try {
            let hot_list = (await this.getData()) || [];
            this.hot_course_list = hot_list.map(item=>{
              let currentTime = new Date().getTime();
              if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
                return {
                  ...item,
                  isDiscount:0
                };
              }else{
                return item;
              }
            });
            // console.log("测试热门精选课程",this.hot_course_list);
            let live_list  =
              (await this.getData({
                isLive: 1
              })) || []; 
            this.live_course_list = live_list.map(item=>{
              let currentTime = new Date().getTime();
              if(!(item.isDiscount == 1 && currentTime >= item.discountStartTime && item.discountEndTime >= currentTime)){
                return {
                  ...item,
                  isDiscount:0
                };
              }else{
                return item;
              }
            });
            this.initMajorList();
            this.initNoticeList();
            this.initBannerList();
            this.initNavList();
            this.getMajorData();
            this.getRecCourseToMajor();
            this.initMember();
            this.getMemberInfo();
            this.getLiveChapterCourse();
            this.getNews();
            this.getCourseComboData();
            res("success");
          } catch (e) {
            console.log(e);
            rej(e);
          }
        }
      }).then();
    }
  },
  activated() {
    if (process.client) {
      this.$nextTick(() => {
        this.initPage();
        this.isClearTimes = false;
        //运行公告通知定时器
        this.runNotice();
        this.countDown();
        setTimeout(() => {
          document.body.scrollTop = this.scroll_heigth;
          document.documentElement.scrollTop = this.scroll_heigth;
          console.log("document:", document.documentElement.scrollTop);
        }, 0);
      });
    }
    this.setDisabled(false);
    this.refreshFun(() => {
      this.initPage()
        .then(res => {
          if (res == "success") {
            this.setLoading(false);
          }
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
  },
  deactivated() {
    this.isClearTimes = true;
    //清除通知定时器
    clearInterval(this.noticeTimer);
    this.noticeTimer = null;
    clearInterval(this.timeTimer);
    this.timeTimer = null;
    //
    let scroll_heigth =
      document.documentElement.scrollTop || document.body.scrollTop;
    this.scroll_heigth = scroll_heigth;
    this.setDisabled(true);
  },
  created() {
    this.setDisabled(false);
    this.initPage();
    this.refreshFun(() => {
      this.initPage()
        .then(res => {
          if (res == "success") {
            this.setLoading(false);
          }
        })
        .catch(() => {
          this.setLoading(false);
          this.SET_IS_LOADING(false);
        });
    });
    if (process.client) {
      this.$nextTick(() => {
        document.body.scrollTop = this.scroll_heigth;
        document.documentElement.scrollTop = this.scroll_heigth;
        // let drag_target = this.$refs.tap;
        // console.log(drag_target);
        // draggable(drag_target, {
        //   start: () => {
        //     return this.left;
        //   },
        //   moving: this.handleDragMoving
        // });
      });
    }
  },
  mounted() {}
};
</script>

<style lang="scss">
.page-mobile-index {
  position: relative;
  // 新首页 ↓↓↓↓↓↓↓↓↓↓
  .new-index-bg-gray{
    background: #F2F2F5;
    width: 7.2rem;
    min-height: calc(100vh - .9rem);
    .head-new-b{
      width: 7.2rem;
      height: .8448rem;
      background: #ffffff;
      text-align: center;
      line-height: .8448rem;
      font-size: .3456rem;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      z-index: 2000;
      position: fixed;
      top: 0;
      left: 0;
    }
    .fixed-new-b{
      width: 7.2rem;
      height: .8448rem;
    }
    .swiper-nav-new-b{
      width: 7.2rem;
      height: 2.88rem;
      position: relative;
      .tips{
        position: absolute;
        right: 0;
        bottom: 0;
        background: #ffffff;
        padding: 0rem .1rem 0rem .3rem;
        height: .384rem;
        font-size: .192rem;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: .384rem;
        border-radius: .96rem 0px 0px 0px;
      }
      .van-swipe {
        height: 100%;
        border-radius: 0rem;
        overflow: hidden;
        .van-swipe-item {
          display: flex;
          align-items: center;
          justify-content: center;
          > img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .menu-new-b{
      width: 6.624rem;
      min-height: 1.728rem;
      background: #FFFFFF;
      border-radius: .1344rem;
      margin: .192rem auto;
      overflow: hidden;
	  display: flex;
	  justify-content: space-around;
	  flex-wrap: wrap;
      /*&:after{伪元素是行内元素 正常浏览器清除浮动方法
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
      }*/
      .menu-item{
        width: 1.656rem;
        height: 1.728rem;
        float: left;
        position: relative;
        .menu-box{
          width: 1.2672rem;
          height: 1.2672rem;
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          img{
            display: block;
            border-radius: 50%;
            overflow: hidden;
            width: .8256rem;
            height: .8256rem;
            margin: 0 auto;
            background:#ffffff;
          }
          .menu-name{
            text-align: center;
            width: 100%;
            margin-top: .13rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: .2688rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #4D4D4D;
          }
        }
      }
    }
    .advert-new-b{
      width: 6.624rem;
      height: 3.456rem;
      background: #FFFFFF;
      border-radius: .1344rem;
      margin: 0 auto;
      display: flex;
      align-items: center;
      overflow: hidden;
      // justify-content: space-between;
      .advert-left-box{
        width: 2.8224rem;
        height: 2.88rem;
        padding: 0 .2304rem 0 .288rem;
        // box-sizing: border-box;
        .advert-name{
          font-size: .3264rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .advert-left-img{
          width: 2.304rem;
          height: 2.304rem;
          margin-top: .2rem;
          position: relative;
          .bg-img{
            display: block;
            width: 2.304rem;
            height: 2.304rem;
            background: linear-gradient(135deg, #4C72FF 0%, #1825D6 100%);
            border-radius: .1152rem;
          }
          .bg-title{
            position: absolute;
            left: .1rem;
            top: .1rem;
            width: 1.4592rem;
            font-size: .3456rem;
            font-family: PangMenZhengDao;
            color: #FFFFFF;
            letter-spacing: .0096rem;
            text-shadow: .0384rem .0192rem .0192rem #000D82;
            .tobuy{
              position: relative;
              left: -.05rem;
              width: 1.392rem;
              height: .4896rem;
              margin-top: .1rem;
              display: block;
            }
          }
        }
        
      }
      .advert-line{
        // width: .0192rem;
        width: 1px;
        height: 2.88rem;
        background: #EDEDF1;
        box-sizing: border-box;
      }
      .advert-right-box{
        width: 3.7824rem;
        height: 2.88rem;
        padding: 0 .288rem 0 .2304rem;
        .count-down{
          font-size: .3264rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          display: flex;
          align-items: center;
          .box{
            display: inline-block;
            vertical-align: middle;
            width: .3264rem;
            height: .3264rem;
            color: #ffffff;
            font-size: .192rem;
            text-align: center;
            line-height: .3264rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            background: #333333;
            border-radius: .0576rem;
          }
        }
        .middle-advert-img{
          position: relative;
          width: 3.264rem;
          height: 1.0944rem;
          border-radius: .1152rem;
          margin-top: .2rem;
          img{
            display: block;
            width: 100%;
            height: 100%;
            border-radius: .1152rem;
          }
          .title{
            position: absolute;
            left: .15rem;
            top: .1rem;
            width: 1.6rem;
            font-size: .3072rem;
            font-family: PangMenZhengDao;
            color: #FFFFFF;
            letter-spacing: .0096rem;
            text-shadow: .0384rem .0192rem .0192rem rgba(0, 0, 0, 0.5);
          }
        }
        .bottom-advert-img{
          position: relative;
          width: 3.264rem;
          height: 1.0944rem;
          border-radius: .1152rem;
          margin-top: .1rem;
          img{
            display: block;
            width: 100%;
            height: 100%;
            border-radius: .1152rem;
          }
          .title{
            position: absolute;
            left: .15rem;
            top: .1rem;
            // width: 1.6rem;
            font-size: .26rem;
            line-height: 1.15;
            font-family: PangMenZhengDao;
            color: #FFFFFF;
            letter-spacing: .0096rem;
            text-shadow: .0192rem .0192rem .0192rem #DB4800;
            .tobuy{
              position: relative;
              left: -.05rem;
              width: 1.44rem;
              height: .4416rem;
              // margin-top: .1rem;
              display: block;
            }
          }
        }
      }
    }
    .team-building-new-b{
      margin: .1536rem auto;
      width: 6.5952rem;
      height: 1.536rem;
      img{
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .live-module-new-b{
      width: 7.2rem;
      .head-box{
        width: 7.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .2rem .288rem;
        .head-left{
          font-size: .3264rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .head-right{
          font-size: .2688rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          display: flex;
          img{
            width: .2304rem;
            height: .2304rem;
            display: block;
            margin-left: .1rem;
          }
        }
      }
      .live-wrapper-list{
        width: 7.2rem;
        height: 2.8rem;
        // height: 2.688rem;
        overflow-x: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        .live-content-list{
          height: 2.688rem;
          display: inline-flex;
          .live-item{
            flex-shrink: 0;
            min-width: 2.688rem;
            height: 2.688rem;
            margin-right: .1152rem;
            background: linear-gradient(180deg, rgba(20, 20, 21, 0) 0%, #171717 100%);
            border-radius: .1344rem;
            &:first-child{
              margin-left: .288rem;
            }
            &:last-child{
              margin-right: .288rem;
              background-image: url('/img/mobile/home_image_live_default.png');
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }
          }
        }
      }
      
    }
    .rec-course-module-new-b{
      width: 7.2rem;
      margin-top: .1rem;
      .head-box{
        width: 7.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .2rem .288rem;
        .head-left{
          font-size: .3264rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .head-right{
          font-size: .2688rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          display: flex;
          img{
            width: .2304rem;
            height: .2304rem;
            display: block;
            margin-left: .1rem;
          }
        }
      }
    }
    .combo-module-new-b{
      width: 7.2rem;
      margin-top: .1rem;
      .head-box{
        width: 7.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .2rem .288rem;
        .head-left{
          font-size: .3264rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .head-right{
          font-size: .2688rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          display: flex;
          img{
            width: .2304rem;
            height: .2304rem;
            display: block;
            margin-left: .1rem;
          }
        }
      }
      .combo-wrapper-list{
        width: 7.2rem;
        height: 3.6rem;
        overflow-x: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        &.gelin-card{
          height: inherit;
          .combo-content-list{
            height: inherit;
            .combo-item{
              height: inherit;
              .course-combo-content{
                .course-box{
                  height: inherit;
                }
              }
              .combo-info-text{
                margin-bottom: .4rem;
              }
            }
          }
        }
        .combo-content-list{
          // height: 3.1968rem;
          height: 3.4rem;
          display: inline-flex;
          .combo-item{
            flex-shrink: 0;
            min-width: 5.2992rem;
            // height: 3.1968rem;
            height: 3.4rem;
            margin-right: .2304rem;
            background: #ffffff;
            border-radius: .192rem;
            padding: .2304rem;
            position: relative;
            overflow: hidden;
            &:first-child{
              margin-left: .288rem;
            }
            &:last-child{
              margin-right: .288rem;
            }
            .course-combo-content{
              display: flex;
              justify-content: space-between;
              align-items: center;
              .course-box{
                width: 2.112rem;
                height: 2.112rem;
                border-radius: .096rem;
                // background: red;
                box-shadow: 0px .0096rem .0768rem #e0e0e6;
              }
              .course-add-btn{
                width: .384rem;
                height: .384rem;
                border-radius: 50%;
                color: #ffffff;
                text-align: center;
                line-height: .384rem;
                font-size: .3rem;
                background: linear-gradient(148deg, #F0D2BE 0%, #D2A279 100%);
              }
            }
            .combo-info-text{
              margin-top: .15rem;
              font-size: .2304rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #333333;
              position: relative;
              padding-left: .15rem;
              &::before{
                content: "";
                display: block;
                position: absolute;
                left: 0;
                top: .05rem;
                width: .0768rem;
                height: .0768rem;
                border-radius: 50%;
                background: #FF4F4F;
              }
            }
            .combo-price-box{
              position: absolute;
              right: 0;
              bottom: 0;
              width: 3.2064rem;
              height: .672rem;
              background: linear-gradient(149deg, #F0D2BE 0%, #D2A279 100%);
              box-shadow: .0192rem 0 .1152rem 0 #F8DBC6;
              border-radius: .96rem 0 .192rem 0;
              text-align: center;
              line-height: .672rem;
              .new-price-combo{
                font-size: .2688rem;
                font-family: DIN-Medium, DIN;
                font-weight: 500;
                color: #FFFFFF;
              }
              .old-price-combo{
                font-size: .2304rem;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FFFFFF;
                margin-left: .3rem;
              }
            }
          }
        }
      }
    }
    .information-new-b{
      width: 7.2rem;
      margin-top: .1rem;
      .head-box{
        width: 7.2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .2rem .288rem;
        .head-left{
          font-size: .3264rem;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
        }
        .head-right{
          font-size: .2688rem;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          display: flex;
          img{
            width: .2304rem;
            height: .2304rem;
            display: block;
            margin-left: .1rem;
          }
        }
      }
      .information-wrapper-list{
        width: 7.2rem;
        height: 2.5rem;
        overflow-x: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        .information-content-list{
          height: 2.2656rem;
          display: inline-flex;
          .information-item{
            flex-shrink: 0;
            min-width: 3.9456rem;
            height: 2.2656rem;
            margin-right: .2304rem;
            background: #ffffff;
            border-radius: .192rem;
            position: relative;
            overflow: hidden;
            &:first-child{
              margin-left: .288rem;
            }
            &:last-child{
              margin-right: .288rem;
            }
            
          }
        }
      }
    }
  }
  
  // 新首页 ↑↑↑↑↑↑↑↑↑↑

  // 旧首页 ↓↓↓↓↓↓↓↓↓↓
  .old-index-bg-white{
    background: #ffffff;
    width: 7.2rem;
    min-height: calc(100vh - .8rem);
    .fixed-box {
      width: 7.2rem;
      height: 0.8rem;
    }
    .header{
      width: 7.2rem;
      height: 0.8rem;
      z-index: 2000;
      // z-index: 999999;
      position: fixed;
      top: 0;
      left: 0;
      line-height: 0.8rem;
      background-color: var(--theme-color);
      display: flex;
      align-items: center;
      box-shadow:none;
      .header_left{
        width: 15%;
        background-color: var(--theme-color);
        color: #ffffff;
        // justify-content: center;
        font-size: .35rem;
        display: flex;
        align-items: center;
      }
      .center_title{
        width: 70%;
        text-align: center;
        font-size: 0.3456rem;
        color: #ffffff;
      }
      .header_right{
        width: 15%;
        background:var(--theme-color);
        // background: #fff;
        
        img{
          margin: 0 auto;
          display: block;
          width: 0.6111rem;
          height: 0.6111rem;
        }
      }
    }
    .interval-line {
      width: 100%;
      height: 0.2rem;
      background: #f7f7fa;
    }
    .bg-banner {
      position: absolute;
      top: .8rem;
      left: 0;
      width: 100%;
      height: 1.8rem;
      // height: 2.208rem;
      // height: 2rem;
      background-color: var(--theme-color);
    }
    .swiper-nav {
      // padding: 0.2rem 0 0 0;
      margin: auto;
      // width: 6.6rem;
      // height: 3.4rem;
      width: 6.624rem;
      height: 3.072rem;
      .van-swipe {
        height: 100%;
        border-radius: 0.16rem;
        box-shadow: 0rem 0.04rem 0.12rem 0rem rgba(0, 0, 0, 0.4);
        overflow: hidden;
        .van-swipe-item {
          display: flex;
          align-items: center;
          justify-content: center;
          > img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .tap-nav {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      padding: 0.2rem 0.2rem;
      .nav-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0.1rem 0.09rem;
        width: 1.5rem;
        .item-icon {
          width: 0.95rem;
          height: 0.95rem;
          border-radius: 1.2rem;
          overflow: hidden;
          text-align: center;
          > img {
            width: 100%;
            height: 100%;
          }
        }
        .item-name {
          width: 100%;
          margin-top: 0.05rem;
          text-align: center;
          color: #010101;
          font-size: 0.24rem;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
    .notice-box {
      position: relative;
      margin: auto;
      padding: 0.2rem 0;
      width: 6.8rem;
      border-top: 0.02rem solid #eee;
      border-bottom: 0.02rem solid #eee;
      .van-notice-bar {
        padding: 0;
        font-size: 0.24rem;
        background-color: #fff;
        .van-notice-bar__left-icon{
          // text-align: right;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          .van-icon__image{
            background: var(--theme-color);
            // width: .3072rem;
            // height: .3072rem;
            width: .2688rem;
            height: .2688rem;
            display: block;
          }
        }
        
      }
      .van-notice-bar__wrap {
        padding: 0 0.2rem;
        height: 0.4rem;
        .van-notice-bar__content {
          height: 100%;
        }
      }
      .notice-swipe {
        height: 100%;
        color: #333;
        .van-swipe-item {
          font-size: 0.24rem;
          height: 0.4rem !important;
          line-height: 0.4rem;
          width: 100%;
          white-space: nowrap;
            text-overflow: ellipsis;
            background: #ffffff;
            overflow: hidden;
            display: flex;
          .title{
              max-width: 78%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .time{
              text-align: center;
              width: 22%;
              color: #a3a5a8;
            }
        }
      }
      .more {
        display: flex;
        align-items: center;
        .van-icon {
          font-size: 0.24rem;
        }
      }
    }
    .notice-module {
      margin: auto;
      width: 6.8rem;
      border-top: 1px solid #ededf1;
      display: flex;
      padding: 0.1rem;
      .notice-container {
        width: 100%;
        overflow: hidden;
        height: 1rem;
        display: flex;
        .notice-left {
          width: 20%;
          height: 1rem;
          background: #ffffff;
          display: flex;
          align-items: center;
          img {
            display: block;
            width: 0.768rem;
            height: 0.768rem;
            // width: 1rem;
            // height: 1rem;
            margin: 0 auto;
          }
        }
        .notice-right {
          width: 80%;
          height: 1rem;
          background: #ffffff;
        }
        ul {
          background: #ffffff;
          li {
            line-height: 0.5rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            background: #ffffff;
            overflow: hidden;
            display: flex;
            font-size: 0.24rem;
            .title {
              max-width: 78%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .time {
              text-align: center;
              width: 22%;
              color: #a3a5a8;
            }
          }
        }
      }
    }
    .live-module {
      // margin: auto;
      // padding: 0.2rem 0 .4rem;
      width: 7.2rem;
      .header-live {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #ededf1;
        padding: 0.288rem 0.2rem;
        .left {
          display: flex;
          align-items: center;

          img {
            width: 0.4rem;
            height: 0.4rem;
            display: block;
            background: var(--theme-color);
          }
          span {
            margin-left: 0.1rem;
            font-size: 0.32rem;
            font-weight: bold;
            color: #313233;
          }
        }
        .right {
          display: flex;
          align-items: center;
          font-size: 0.24rem;
          color: #a3a5a8;
          img {
            width: 0.24rem;
            height: 0.24rem;
            display: block;
          }
        }
      }
      .live-container {
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
        // margin-left: .3rem;
        // margin-right: .3rem;
        overflow-x: scroll;
        overflow-y: hidden;
        -webkit-backface-visibility: hidden;
        -webkit-perspective: 1000;
        -webkit-overflow-scrolling: touch;
        text-align: justify;
        // background: #000;
        box-sizing: border-box;
        display: flex;
        &::-webkit-scrollbar {
          display: none;
        }
        // .live-item{
        //   flex-shrink: 0;
        //   width: 3.8rem;
        //   height: 2.4rem;
        //   border-radius: .1rem;
        //   background: chartreuse;
        //   margin-right: .2rem;
        //   overflow: hidden;
        //   position: relative;
        //   img{
        //     width: 100%;
        //     height: 100%;
        //     display: block;
        //   }
        //   .item-box{
        //     position: absolute;
        //     left: 0;
        //     right: 0;
        //     top: 0;
        //     bottom: 0;
        //     background: rgba(0, 0, 0, 0.6);
        //     .tags{
        //       margin: .1rem 0 0 .1rem;
        //       width: 3rem;
        //       height: .5rem;
        //       background-image: linear-gradient(0deg,
        //     #5b96ff 23%,
        //     #5ce9ff 100%),
        //   linear-gradient(
        //     #5b96ff,
        //     #5b96ff);
        //     box-shadow: 0px 0px 9px 0px
        //       rgba(42, 47, 51, 0.4);
        //     border-radius: 0px 22px 22px 21px;
        //     display: flex;
        //     align-items: center;
        //     // justify-content: space-between;
        //     padding: 0 .2rem;
        //     color: #fff;
        //       img{
        //         width: .3rem;
        //         height: .2rem;
        //         display: block;
        //       }
        //     }
        //     .chapter-name{
        //       color: #fff;
        //       padding: .1rem 0rem;
        //       margin: 0 .1rem;
        //       line-height: .4rem;
        //       height: .93rem;
        //       display: -webkit-box;
        //       -webkit-line-clamp:2;
        //       overflow: hidden;
        //       text-overflow: ellipsis;
        //       -webkit-box-orient: vertical;
        //       font-size: .3rem;
        //       border-bottom: .01rem solid #e3e4e6;
        //     }
        //     .teacher{
        //       margin: .1rem .1rem 0;
        //       display: flex;
        //       align-items: center;
        //       color: #fff;
        //       font-size: .3rem;
        //       .left-img{
        //         width: .6rem;
        //         height: .6rem;
        //         background: #ffffff;
        //         border-radius: 50%;
        //         overflow: hidden;
        //         margin-right: .1rem;
        //       }
        //     }
        //   }
        // }
      }
    }
    .recommend-module {
      margin: 0;
      padding: 0;
      width: 7.2rem;
      .header-recommend {
        display: flex;
        justify-content: space-between;
        align-items: center;
        // align-items: baseline;
        padding: 0.288rem 0.2rem;
        border-bottom: 1px solid #ededf1;
        .left {
          display: flex;
          align-items: center;
          // align-items: baseline;
          img {
            width: 0.4rem;
            height: 0.4rem;
            // width: .6rem;
            // height: .6rem;
            display: block;
            background: var(--theme-color);
          }
          span {
            margin-left: 0.1rem;
            font-size: 0.32rem;
            font-weight: bold;
            color: #313233;
          }
        }
        .right {
          display: flex;
          align-items: center;
          // align-items: baseline;
          // font-size: .3rem;
          font-size: 0.24rem;
          color: #a3a5a8;
          img {
            width: 0.24rem;
            height: 0.24rem;
            display: block;
          }
        }
      }
      .recommend-container {
        .tap-content {
          width: 100%;
          overflow-x: scroll;
          overflow-y: hidden;
          -webkit-backface-visibility: hidden;
          -webkit-perspective: 1000;
          -webkit-overflow-scrolling: touch;
          text-align: justify;
          box-sizing: border-box;
          display: flex;
          // margin-top: .2rem;
          &::-webkit-scrollbar {
            display: none;
          }
          .tap {
            text-align: center;
            flex-shrink: 0;
            width: 30%;
            // font-size: .3rem;
            font-size: 0.2688rem;
            height: 0.7rem;
            line-height: 0.7rem;
            position: relative;
            color: #979899;
            // color: #979899;
          }
          .tap.active::before {
            content: "";
            display: block;
            position: absolute;
            width: 0.6rem;
            height: 0.04rem;
            background: var(--theme-color);
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
          }
          .tap.active {
            font-weight: bold;
            color: #313233;
          }
        }
        .module-recommend {
          // padding: .2rem 0;
        }
      }
    }
    .information-module {
      // margin: auto;
      // padding: 0.2rem 0;
      // width: 6.8rem;
      width: 7.2rem;
      .header-information {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.288rem 0.2rem;
        border-bottom: 1px solid #ededf1;
        .left {
          display: flex;
          align-items: center;
          img {
            width: 0.4rem;
            height: 0.4rem;
            display: block;
            background: var(--theme-color);
          }
          span {
            margin-left: 0.1rem;
            font-size: 0.32rem;
            font-weight: bold;
            color: #313233;
          }
        }
        .right {
          display: flex;
          align-items: center;
          font-size: 0.24rem;
          color: #a3a5a8;
          img {
            width: 0.24rem;
            height: 0.24rem;
            display: block;
          }
        }
      }
      .recommend-container {
        padding-bottom: 0.2rem;
      }
    }
    .classify-module {
      position: relative;
      padding: 0 0.2rem;
      .tap-container {
        display: flex;
        align-items: center;
        // width: 7.2rem;
        height: 0.8rem;
        overflow: hidden;
        .tap-wrap {
          padding: 0.1rem;
          white-space: nowrap;
          .tap-item {
            background-color: #ecebeb;
            display: inline-block;
            padding: 0.1rem 0.2rem;
            border-radius: 1rem;
            color: #101010;
            font-size: 0.22rem;
          }
          .tap-item + .tap-item {
            margin-left: 0.2rem;
          }
          .tap-item-active {
            background-color: var(--theme-color);
            color: #fff;
          }
        }
      }
      .module-title {
        padding: 0.2rem 0;
        color: #010101;
        font-size: 0.36rem;
      }
      .module-box {
      }
    }
  }
  // 旧首页 ↑↑↑↑↑↑↑↑↑↑
  .van-overlay {
    z-index: 9999;
  }
  .intention_box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5.76rem;
    height: 4.5rem;
    background: #ffffff;
    border-radius: .1152rem;
    box-sizing: border-box;
    padding: .2rem;
    .intention_title{
      text-align: center;
      color: #494b4d;
      font-size: .32rem;
    }
  }
  .login-tips-box{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 5.76rem;
    height: 3.648rem;
    background: #ffffff;
    border-radius: .1152rem;
    .close-btn{
      position: absolute;
      right: .15rem;
      top: .15rem;
      font-size: 0.5rem;
      color: #e1e3e6;
    }
    .tips-text{
      text-align: center;
      color: #494b4d;
      font-size: .3264rem;
      font-weight: bold;
      line-height: 1.4rem;
      margin-top: .4rem;
    }
    .wx-btn{
      width: 1.92rem;
      height: .576rem;
      background-color: var(--theme-color);
      border-radius: .288rem;
      color: #ffffff;
      line-height: .576rem;
      text-align: center;
      font-size: .288rem;
      margin: .2rem auto;
    }
    .account-btn{
      width: 1.92rem;
      height: .576rem;
      background-color: #fff;
      border-radius: .288rem;
      color: var(--theme-color);
      line-height: .576rem;
      text-align: center;
      font-size: .288rem;
      margin: 0 auto;
    }
  }
  .bottom-area {
    padding: 0.4rem 0;
    text-align: center;
    color: #999;
    font-weight: 400;
    font-size: 0.22rem;
    background-color: #fbfbfb;
    > em {
      // font-style: italic
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: normal;
      > img {
        margin-right: 0.04rem;
        width: 0.21rem;
        height: 0.21rem;
      }
    }
    > p {
      margin-top: 0.05rem;
      > a {
        color: #999;
        font-weight: bold;
        text-decoration: underline;
      }
    }
  }
}
</style>
